<template>
  <div class='container'>
    <el-dialog
  title="题目预览"
  :visible="showDialog"
  @close='closeDialog'
  width="60%"
>
    <div class="top">
      <div class="el-row">
        <div class="el-col el-col-6">【题型】：{{format1(list.questionType)}}</div>
        <div class="el-col el-col-6">【编号】：{{list.id}}</div>
        <div class="el-col el-col-6">【难度】：{{format(list.difficulty)}}</div>
        <div class="el-col el-col-6">【标签】：{{list.tags}}</div>
        <div class="el-col el-col-6">【学科】：{{list.subjectName}}</div>
        <div class="el-col el-col-6">【目录】：{{list.directoryName}}</div>
        <div class="el-col el-col-6">【方向】：{{list.direction}}</div>
      </div>
    </div>
    <hr>
  <div class="ti">
      <p>【题干】：</p>
      <p style="color:blue" v-html="list.question"></p>
      <div v-if="format1(list.questionType)==='单选'">{{format1(list.questionType)}} 选项：（以下选中的选项为正确答案）
         <el-row v-for="item in list.options" :key="item.id">
            <el-radio el-radio :label="1" :value='item.isRight' >{{item.code}}{{item.title}}</el-radio>
         </el-row>
      </div>
       <div v-if="format1(list.questionType)==='多选'">{{format1(list.questionType)}} 选项：（以下选中的选项为正确答案）
         <el-row v-for="item in list.options" :key="item.id">
            <el-checkbox :label="item.isRight" :value='checkboxCode' >{{item.code}}{{item.title}}</el-checkbox>
         </el-row>
      </div>
       <div v-if="format1(list.questionType)==='简答'">
         <el-row v-for="item in list.options" :key="item.id">

         </el-row>
      </div>
  </div>
    <hr>
    <p>【参考答案】：<el-button type="danger" @click="show">视频答案预览</el-button></p>
    <div v-if="isShow"><video width="400px" autoplay="autoplay" controls="controls">
        <source :src="list.videoURL"><source>
      </video></div>
    <hr>
    <div class="hang">【题目备注】：<span v-html="list.answer"></span></div>
    <hr>
    <div>【题目备注】：{{list.remarks}} </div>
     <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDialog">关闭</el-button>
      </span>
</el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'// 引入难度和题型

export default {
  props: {
    showDialog: {
      type: Boolean
    },
    number: {
      type: Object
    }
  },
  data () {
    return {
      list: this.number,
      id: 18,
      isShow: false, // 默认关闭
      checkboxCode: [1]
    }
  },
  watch: {
    number () {
      // console.log('第一次负责', this.number)
      this.list = this.number
      // console.log(this.list)
    }
  },
  methods: {
    //   关闭弹窗
    closeDialog () {
      this.$emit('close-dialog')
      this.isShow = false// 点击关闭一起关
    },

    // 筛选每个数据里需要转换的数字，转换成对应得字体，然后映射新的数组
    format (diff) {
      const map = {}
      difficulty.forEach(item => {
        map[item.value] = item.label
      })
      return map[diff]// 每个都返回
    },
    format1 (diff) {
      const map = {}
      questionType.forEach(item => {
        map[item.value] = item.label
      })
      return map[diff]
    },
    show () {
      this.isShow = true// 点击时触发，
      // console.log(this.number)
    }
  }
}
</script>

<style scoped >
.top{
  width: 100%;
  height: 100px;
  /* // border-bottom: 2px solid; */
}
.el-col{
  height: 40px;
  line-height: 40px;
}
ul,li{
  list-style: none;
}

.hang{
  display:flex;
  align-items:center;
}
p{
    margin: 0;
  }
</style>
